<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta content="搜索关键词" name="keywords" />
        <meta content="网站介绍" name="description" />
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
        <title>GOLF葡萄酒官网</title>
        <link href="/asset/images/favicon.ico" rel="icon" type="image/x-icon">
        <link rel="stylesheet" href="/assets/modular/web/css/base.css" />
        <link rel="stylesheet" href="/assets/common/libs/layui/css/layui.css"/>
        <script type="text/javascript" src="/assets/common/libs/jquery/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="/assets/modular/web/js/vue.min.js"></script>
        <style type="text/css">
            .w-nav-box .w-nav-conn ul li:first-child a{ background-color: #c40000; color:#fff;}
        </style>
    </head>
    <body>
    <div id="indexVue" class="layui-fluid wrapper">
        <!-- 头部：标题和导航列 start -->
        <header>
            <div class="layui-row">
                <div class="w-title-phone-box">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <div class="title-box">
                            <h1>
                                <a href="/" id="backToTop" v-text="infoSet.topName"></a>
                                <i v-if="infoSet.id == '' || infoSet.id == null" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 26px;"></i>
                            </h1>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6">
                        <div class="phone-box">
                            <p><img src="/assets/modular/web/images/phone.png">{{infoSet.topPhone}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div class="w-nav-box">
                        <nav class="w-nav-conn">
                            <ul>
                                <li><a href="/">首页</a></li>
                                <li><a href="/web/brank/">品牌理念</a></li>
                                <li><a href="/web/enterInfo/">企业资讯</a></li>
                                <li><a href="/web/merToJoin/">招商加盟</a></li>
                                <li><a href="/web/aboutMe/">关于我们</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- 头部：标题和导航列 end -->

        <!-- 轮播 start -->
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                <div class="layui-carousel w-index-lunbo">
                    <div carousel-item>
                        <div v-for="(item, index) in carouselList" :key="item.id">
                            <img v-bind:src="'/hyRedWineFile/images/' + item.fileName" v-bind:alt="item.fileName">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 轮播 end -->

        <!-- banner-one start -->
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12 w-banner-one">
                <div class="w-banner-one-box">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6 w-banner-one-min">
                        <div class="w-banner-box-l">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                                    <div class="w-banner-one-lt">
                                        <h1 v-html="indexBannerOne.leftTitle"></h1>
                                        <img src="/assets/modular/web/images/kuohao.png" alt="kuohao.png">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                                    <div class="w-banner-one-lb">
                                        <img v-bind:src="'/hyRedWineFile/images/' + indexBannerOne.leftOneImage" v-bind:alt="indexBannerOne.leftOneImage">
                                        <img src="/assets/modular/web/images/fangkuang.png" alt="fangkuang.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6 w-banner-one-min">
                        <div class="w-banner-box-r">
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                                    <div class="w-banner-one-rt">
                                        <img v-bind:src="'/hyRedWineFile/images/' + indexBannerOne.rightOneImage" v-bind:alt="indexBannerOne.rightOneImage">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                                    <div class="w-banner-one-rb">
                                        <img v-bind:src="'/hyRedWineFile/images/' + indexBannerOne.rightTwoImage" v-bind:alt="indexBannerOne.rightTwoImage">
                                        <div class="w-banner-one-rbc">
                                            <h1 v-text="indexBannerOne.rightTwoTitle"></h1>
                                            <p v-text="indexBannerOne.rightTwoContent"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner-one end -->

        <!-- banner-two start -->
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12 w-banner-two">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12 w-banner-two-bg">
                        <img v-bind:src="'/hyRedWineFile/images/' + indexBannerTwo.fileName" v-bind:alt="indexBannerTwo.fineName">
                    </div>
                    <div class="layui-row w-banner-two-box">
                        <div class="w-banner-two-boxwidth">
                            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 layui-col-lg6 w-banner-two-conn">
                                <div class="w-banner-two-bt">
                                    <h1 class="w-banner-two-bte" v-text="indexBannerTwo.enTitle"></h1>
                                    <h1 class="w-banner-two-btc" v-text="indexBannerTwo.chTitle"></h1>
                                    <p v-text="indexBannerTwo.minTitle"></p>
                                </div>
                                <div class="w-banner-two-bb">
                                    <p v-html="indexBannerTwo.content"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner-two end -->

        <!-- 视频展区 start -->
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12 w-video-bg">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                        <div class="w-video-box-t">
                            <img v-bind:src="'/hyRedWineFile/images/' + banner.fileName" v-bind:alt="banner.fileName">
                            <div class="w-video-box-tbox">
                                <h1>视频展区</h1>
                            </div>
                        </div>
                        <div class="w-video-conn">
                            <div v-for="(item, index) in indexVideoList" class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg4 w-video-cc" :key="item.id">
                                <div class="w-video-ccvi">
                                    <video controls>
                                        <source v-bind:src="'/hyRedWineFile/videos/' + item.fileName" type="video/mp4">您的浏览器不支持视频。
                                    </video>
                                    <h3 v-text="item.title"></h3>
                                    <p v-text="item.content"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频展区 end -->

        <!-- 页脚 start -->
        <footer>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div class="foot-into-tbox">
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 layui-col-lg4">
                            地址：{{infoSet.bmAddress}}
                        </div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 layui-col-lg4">
                            电话：{{infoSet.bmPhone}}
                        </div>
                        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4 layui-col-lg4">
                            邮箱：{{infoSet.bmEmail}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <div class="foot-into-bbox">
                        <p>
                            {{infoSet.bmBase}} | {{infoSet.bmCompanyName}} | 版权所有
                        </p>
                        <p>
                            技术支持 | {{infoSet.bmDeveName}}
                        </p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- 页脚 end -->

        <!-- 返回顶部 start -->
        <div class="backToTop">
            <a href="#backToTop"><img src="/assets/modular/web/images/backTop.png"></a>
        </div>
        <!-- 返回顶部 end -->

    </div>
    <script type="text/javascript" src="/assets/common/libs/layui/layui.js"></script>
    <script>
        var indexVue = new Vue({
            el: '#indexVue',
            data: function () {
                return {
                    ins: null,
                    infoSet: [], //基本信息配置
                    carouselList: [], //轮播
                    indexBannerOne: [], //首页区块一
                    indexBannerTwo: [], //首页区块二
                    indexVideoList: [], //首页视频展区
                    banner: [] //banner首页背景图
                }
            },
            created: function () {
                const me = this;
                me.$nextTick(function () {
                    me.getInitData();
                });
            },
            methods: {
                //初始化基本信息
                getInitData: function(){
                    const me = this;
                    $.ajax({
                        type: 'POST',
                        url: '/getInitData',
                        data: {},
                        dataType: 'JSON',
                        success: function(data){
                            me.infoSet = data.infoSet;
                            me.carouselList = data.carouselList;
                            me.indexBannerOne = data.indexBannerOne;
                            me.indexBannerTwo = data.indexBannerTwo;
                            me.indexVideoList = data.indexVideoList;
                            me.banner = data.banner;

                            //初始化轮播
                            setTimeout(function () {
                                me.initCarousel();
                            }, 1000);

                        },
                        error: function(error){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(error, {icon:2});
                            });
                        }
                    })
                },

                //初始化轮播
                initCarousel: function(){
                    const me = this;
                    //重置轮播
                    me.ins.reload({
                        elem: '.w-index-lunbo'
                        ,width: '100%' //设置容器宽度
                        ,arrow: 'hover' //悬停显示箭头
                        ,autoplay: true
                        ,interval: 5000
                        ,index: 0
                    });

                    var bannerH = $('.w-index-lunbo img')[0].height;
                    $('.layui-carousel').css('height',bannerH+'px');

                    me.initBackTop(); //初始化返回顶部按钮
                },

                //初始化返回顶部按钮
                initBackTop: function(){
                    $(window).bind("scroll", function () {
                        var sTop = $(window).scrollTop();
                        var sTop = parseInt(sTop);
                        if (sTop >= 50) {
                            $(".backToTop").slideDown();
                        }else {
                            $(".backToTop").slideUp();
                        }
                    });
                }
            }
        });

        layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            indexVue.ins = carousel.render({
                elem: '.w-index-lunbo'
                ,width: '100%' //设置容器宽度
                ,arrow: 'hover' //悬停显示箭头
                ,autoplay: true
                ,interval: 1000
                ,index: 0
            });
        });
    </script>
    </body>
</html>